<template>
  <el-dialog
    custom-class="add-maintenance"
    v-el-drag-dialog="{ drag: true, full: false, resize: false }"
    title="维修预约"
    :visible="true"
    :close-on-click-modal="false"
    @close="closeMd"
    :width="'400px'">
    <el-form
      :model="fm.ps"
      :ref="fm.fname"
      :inline="true"
      :label-width="'100px'"
      @keyup.enter.native="onSubmit">
      <el-form-item 
        label="开始时间"
        required
        style="margin-bottom: 0px;">
        <el-form-item
          prop="applyStime.date"
          :rules="[{ required: true, message: '预约开始日期不能为空', trigger: 'change' }]">
          <el-date-picker
            v-model="fm.ps.applyStime.date"
            type="date"
            placeholder="开始日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            style="width: 130px;">
          </el-date-picker>
        </el-form-item>

        <el-form-item
          prop="applyStime.time"
          :rules="[{ required: true, message: '预约开始时间不能为空', trigger: 'change' }]">
          <el-time-select
            style="width: 100px;"
            placeholder="时分"
            v-model="fm.ps.applyStime.time"
            :picker-options="{
              start: '00:00',
              step: '00:30',
              end: '23:59',
            }">
          </el-time-select>
        </el-form-item>
      </el-form-item>

      <el-form-item 
        label="结束时间"
        required
        style="margin-bottom: 0px;">
        <el-form-item
          prop="applyEtime.date"
          :rules="[{required: true, message: '预约结束日期', trigger: 'change'}]">
          <el-date-picker
            v-model="fm.ps.applyEtime.date"
            type="date"
            placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            style="width: 130px;">
          </el-date-picker>
        </el-form-item>

        <el-form-item
          prop="applyEtime.time"
          :rules="[{required: true, message: '结束时间', trigger: 'change'}]">
          <el-time-select
            style="width: 100px;"
            placeholder="时分"
            v-model="fm.ps.applyEtime.time"
            :picker-options="{
              start: '00:00',
              step: '00:30',
              end: '23:59',
            }">
          </el-time-select>
        </el-form-item>
      </el-form-item>

      <el-form-item 
        label="修理厂" 
        prop="applyPoint.name">
        <MapPointInp
          :name="'applyPoint'"
          :placeholder="'搜索修理厂位置并选择'"
          :defList="[]"
          :defPoint="fm.ps.applyPoint"
          @handleSel="setPoint"
          style="width: 240px;"
        />
      </el-form-item>

      <el-form-item 
        label="咨询电话" 
        prop="applyPhone">
        <el-input 
          v-model="fm.ps.applyPhone" 
          placeholder="咨询电话" 
          style="width: 240px;"
        />
      </el-form-item>
      
      <el-form-item 
        label="维修类型" 
        prop="applyTypeId">
        <el-select
          v-model="fm.ps.applyTypeId"
          clearable filterable
          placeholder="请选择预约维修类型"
          style="width: 240px;">
          <el-option
            v-for="it in repaireList"
            :key="it.id"
            :label="it.typeName"
            :value="it.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item 
        label="备注说明" 
        prop="note">
        <el-input
          type="textarea"
          placeholder="比如保养维修内容， 或者要告诉师傅其他相关事项"
          maxlength="500"
          show-word-limit
          v-model="fm.ps.note"
          style="width: 240px;"
          :autosize="{ minRows: 5, maxRows: 4 }"
        />
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button 
        type="primary" 
        :icon="'el-icon-plus'" 
        @click="onSubmit" 
        :loading="fm.sb.load">
        {{ fm.sb.text }}
      </el-button>

      <el-button 
        type="primary" 
        :icon="'el-icon-close'" 
        @click="closeMd" >
        关闭
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import elDragDialog from "@/directive/el-drag-dialog";

import MapPointInp from '@/components/MapPointInp';

import * as logisticsSer from "@/api/services/logistics.service";
import * as systemSer from "@/api/services/system.service";

export default {
  name: "AddMaintenance",
  directives: { elDragDialog },
  props: {myData: Object},
  components: { MapPointInp },
  data() {
    return {
      // 日期处理
      pickerOptions: {
        disabledDate(time) {
          const dd = new Date();
          dd.setDate(dd.getDate() - 1);
          return time < dd;
        },
      },

      fm: {
        fname: "addMaintenanceFm",
        sb: { load: false, text: "提交预约" },
        ps: {
          // 预约开始时间
          applyStime: {
            date: '',
            time: '',
          }, 
          // 预约结束时间
          applyEtime: {
            date: '',
            time: '',
          }, 
          // 预约保养类型的ID
          applyTypeId: "", 
          // 预约位置
          applyPoint: {
              // 地址详情 成都市 武侯区 天府广场
              address: '',        
              // 地址简称 天府广场
              name: '',           
              // 地点坐标 140.xxxxxx,30.xxxxxx
              lnglat: '',         
          }, 
          // 电话
          applyPhone: "", 
          // 备注
          note: "", 
        },
        
      },
      // 维修车辆id数组
      repairIdArr: this.myData.repairIdArr || [],

      // 修理厂-选择列表
      repaireList: [],

    };
  },
  created() {
    console.log('父组件', this.myData);
    this.init();
  },
  methods: {
    /* 关闭弹框 */
    closeMd() {
      this.$emit("myClick", {state: false});
    },
    init() {
      systemSer.findRepairTypeList({ page: 1, rows: 9999 }).then(res => {
        this.repaireList = res?.data || [];
      });
    },
    // 选择地点后的回调函数
    setPoint(e){
      const that = this, ps = that.fm.ps;

      if(e.p){
        ps.applyPoint.address = `${e.p.area.split('-')[1]} ${e.p.name}`;
        ps.applyPoint.name = e.p.name;
        ps.applyPoint.lnglat = e.p.lnglat;
      }else{
        ps.applyPoint.address = '';
        ps.applyPoint.name = '';
        ps.applyPoint.lnglat = '';
      }
    },

    // 表单提交
    onSubmit() {
      let that = this, U = that.U, fm = that.fm, sb = fm.sb, ps = U.scopy(fm.ps);
      
      that.$refs[fm.fname].validate((valid) => {
        if (!valid) { return U.qerror('请填写必填项'); } else {
          sb.load = true;

          // 维修预约车辆id
          ps.vehicleIds = this.repairIdArr;
          // 预约起止时间
          const Stime = this.$moment(`${ps.applyStime.date} ${ps.applyStime.time}`).format("YYYY-MM-DD HH:mm");
          const Etime = this.$moment(`${ps.applyEtime.date} ${ps.applyEtime.time}`).format("YYYY-MM-DD HH:mm");
          ps.applyStime = Stime;
          ps.applyEtime = Etime;
          // 预约位置
          if(ps.applyPoint?.lnglat){
            ps.applyAddress = ps.applyPoint.address;
            ps.applyLatLon = ps.applyPoint.lnglat;
          }
          delete ps.applyPoint;

          logisticsSer.applyRepair(ps).then(res => {
            sb.load = false;

            if (res.code != 1) {
              U.qerror("提交成功");
            } else {
              U.qsuccess(res.msg);

              // 调用父组件方法-重新加载数据
              that.$emit("reloadDg");
              that.closeMd();
            }
          });

          setTimeout(() => { sb.load = false; }, 10000);
        }
      });
    },


  },
};
</script>